.home {
  height: 100%;
  flex: 1;
  overflow: auto;
  background-color: #fff;

  .home-body {
    width: 1080px;
    margin: 0 auto;
    padding: 20px;
    overflow: auto;
    background-color: #fff;

    .home-content {
      margin-bottom: 10px;
      border-radius: 4px;
      overflow: hidden;
      background-color: #fff;

      .home-content-title {
        padding: 20px 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .home-content-title-text {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
        }
      }

      .home-content-detail {
        padding: 20px;
        min-height: 130px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        overflow: hidden;
        gap: 20px;
        height: 104px;
        justify-content: start;


        .home-content-detail-item {
          flex: 1;
          max-width: 25%;
          min-width: 120px;
          padding: 10px;
          border-radius: 4px;
          cursor: pointer;
          background-color: #f7f7f7;
          //border-bottom: 2px solid #fafbfc;

          .item-title {
            margin-bottom: 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
            font-size: 16px;
            justify-content: start;

            .item-title-png {
              padding-right: 10px;

              .user-big-icon {
                width: 32px;
                height: 32px;
                border-radius: 4px;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }

            .item-title-text {
              margin-right: 15px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              max-width: 140px;
            }
          }

          .item-work {
            display: flex;
            gap: 10px;

            .item-work-item {
              font-size: 12px;
              display: inline-flex;
              width: 100%;
              justify-content: space-between;
              height: 30px;
              line-height: 30px;
              gap: 5px;

              .item-work-label {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 60px;
              }
            }
          }
        }

        .home-content-detail-item:hover {
          border-radius: 4px 4px 0 0;
          border-bottom-color: var(--tiklab-blue);
          transition: 1s;
        }

      }
    }

    .host-graphics-list {
      //padding: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 4px;

      .home-graphics-title {
        width: 100%;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .home-graphics-title-text{
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
        }

        .host-graphics-choose{
          border-radius: 4px;
          cursor: pointer;
        }
      }

      .host-graphics-line {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        height: 90px;
        margin-top: 20px;

        .host-graphics-overview {
          flex: 1;
          min-width: 120px;
          padding: 10px;
          border-radius: 4px;
          cursor: pointer;
          background-color: #fafbfc;

          .host-graphics-title {
            display: flex;
            justify-content: space-between;
            margin-right: 10px;

          }

          .host-graphics-progress {
            margin-top: 30px;
            margin-right: 10px;
          }

        }


        .host-one-overview {
          width: 25%;
          padding: 10px;
          border-radius: 4px;
          background-color: #fafbfc;
          //border: 1px solid #f0f0f0;
          text-align: center;
          height: 90px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: column;

          .host-one-title-text {
            font-weight: bold;
          }

        }

        //占据一个空格,保持美观的同时百分比展示也不会样式走样
        .host-one-substitute{
          width: 25%;
          padding: 10px;
          border-radius: 4px;
          text-align: center;
          height: 90px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      }

      .host-graphics {
        display: flex;
        margin-top: 20px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        .host-graphics-Top{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
        }

        .host-graphics-chart{
          display: flex;
          justify-content: center;
          width: 1000px;
          height: 400px;
          user-select: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          position: relative;
          padding: 20px;
          border-radius: 4px;
          background-color: #fafbfc;
          .empty-style{
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: auto;
          }
        }

        .host-alarm-div{
          display: flex;
          flex-direction: column;
          width: 1000px;
          height: 400px;
          padding: 20px;
          border-radius: 4px;
          background-color: #fafbfc;

          .host-alarm-div-empty{
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: auto;
          }
          .host-alarm-title{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
          }

          .host-alarm-line{
            display: flex;
            margin: 3px 0 3px 10px;

            .host-alarm-text-title{
              width: 25%;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 13px;
            }

            .host-alarm-text{
              width: 25%;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 13px;
            }
          }
        }

        .host-graphics-alarmTypeNum{
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: column;

          .host-graphics-item{
            width: 240px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;

            .graphics-item-title{
              font-size: 16px;
            }

            .graphics-item-num{
              font-size: 16px;
            }

          }

        }
      }

    }

    .home-dynamic-table {
      background-color: #fff;
      border-radius: 4px;

      .home-table-title {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 16px;
      }

      .home-alarm-table-list {
        margin-top: 10px;
        display: flex;
        flex-direction: column;

        .home-alarm-table-line {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          gap: 20px;
          justify-content: space-between;

          .home-alarm-table-div {
            width: 400px;
            white-space: nowrap;          /* 防止文本换行 */
            overflow: hidden;             /* 超出部分隐藏 */
            text-overflow: ellipsis;      /* 使用省略号表示超出部分 */
          }
        }
      }
    }
  }

}